<div class="gird_24 dpage">
    <div class="dcontent" style="padding: 28px 0">
        <div class="dbr5" style="
             min-height: 400px;
             background: rgb(247,247,247);
             -webkit-box-shadow:  0px 0px 6px #000;
             -moz-box-shadow:  0px 0px 6px #000;
             box-shadow:  0px 0px 6px #000;
             ">
            <div style="padding:20px 0 20px 20px;position: relative">
                <div class="" style="width: 638px;border: 1px solid #ccc;
                     padding: 8px 20px 0px 20px;-webkit-border-radius: 5px;
                     -moz-border-radius: 5px;
                     border-radius: 5px;
                     margin-left: 0px;">
                    <div class="tit" style="width: 640px">
                        <h1>
                            Đơn Đặt Hàng
                        </h1>
                    </div>
                    <div style=";padding: 20px 0">
                        <input type="hidden" id="txt-productid" value="{{$data["product"]["ProductID"]}}"/>
                        <fieldset>
                            <legend><b>Thông tin sản Phẩm</b></legend>

                            <table style="width: 100%" class="dt">
                                <tr>
                                    <td><b>Sản Phẩm</b></td>
                                    <td><b>Đơn giá</b></td>
                                    <td><b>Số Lượng</b></td>
                                    <td style="text-align: right"><b>Thành Tiền</b></td>
                                </tr>
                                <tr>
                                    <td>{{$data["product"]["ProductName"]}}</td>
                                    <td>{{number_format($data["product"]["UnitsOnOrder"], 0, ',', '.')}}<sup>đ</sup></td>
                                    <td><input style="width: 60px" id="txt-soluong" type="text" value="1" onblur="reloadthanhtien()"/></td>
                                    <td style="text-align: right;font-weight: bold;" id="thanhtien">{{number_format($data["product"]["UnitsOnOrder"], 0, ',', '.')}}<sup>đ</sup></td>
                                </tr>
                                <tr class="hidden">

                                    <th colspan="3" style="text-align: right">Phí giao hàng</th>
                                    <td style="text-align: right;font-weight: bold;" class="sshipprice">{{$_SESSION["ShipInfo"]["ShipPrice"]}}<sup>đ</sup></td>
                                </tr>
                                <tr class="hidden">
                                    <th colspan="3" style="text-align: right" class="dtar">Tổng Thành Tiền</th>
                                    <td style="text-align: right;font-weight: bold;color: orange" class="sttt">{{number_format($data["product"]["UnitsOnOrder"], 0, ',', '.')}}<sup>đ</sup></td>
                                </tr>
                            </table>
                        </fieldset>
                        <div class="order-step1-info">

                        </div>
                        <div class="order-step2-pay">
                        </div>
                    </div>
                    <span class="step1">
                        <div class="tit" style="width: 640px">
                            <h1>
                                Thông tin người nhận
                            </h1>
                        </div>
                        <div style="padding: 20px 0">
                            <table style="width: 100%">
                                <tr>
                                    <td class="dvam " >Họ và Tên</td>
                                    <td style="padding-bottom: 12px">
                                        <div style="padding-right: 20px">
                                            <input type="text" id="txt-nguoinhan" class="cyrle" value="{{if isset($_SESSION['ShipInfo']["ShipName"])}}{{$_SESSION['ShipInfo']["ShipName"]}}{{/if}}"/>
                                        </div>
                                    </td>
                                    <td class="dvam "  style="padding-left: 40px">Điện Thoại</td>
                                    <td>
                                        <div style="padding-right: 20px">
                                            <input id="txt-sodienthoai" type="text" class="cyrle" value="{{if isset($_SESSION['ShipInfo']["ShipPhone"])}}{{$_SESSION['ShipInfo']["ShipPhone"]}}{{/if}}" />
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="dvam ">Nội Dung</td>
                                    <td colspan="3">
                                        <div style="padding-right: 20px">
                                            <!--                                        <input type="text" class="cyrle" />-->
                                            <textarea id="txt-noidung"  class="cyrle">{{if isset($_SESSION['ShipInfo']["ShipNote"])}}{{$_SESSION['ShipInfo']["ShipNote"]}}{{/if}}</textarea>
                                        </div>
                                    </td>

                                </tr>

                            </table>
                            <div style="position: relative;height: 43px;">
                                <div class="nextbtn" onclick="gototep2()" style="margin-top: 12px">
                                    <img src="{{base_url()}}deal_css/images/tiep-theo.png"/>
                                </div>
                                <!--                                <div class="mybutton fr " onclick="gototep2()">
                                                                    <div><span>Tiếp Theo</span></div>
                                                                </div>
                                                                <div class="clear"></div>-->
                            </div>
                        </div>
                    </span>
                    <div class="step2" style="display: none;padding-bottom: 20px;">
                        <div class="tit" style="width: 640px">
                            <h1>
                                Hình Thức Thanh Toán
                            </h1>
                        </div>
                        <div style="padding: 20px 0">
                            <div style="position: relative;">
                                <table style="width: 100%">
                                    <tr>
                                        <td class="dvam " >Hình thức thanh toán</td>
                                        <td colspan="3">
                                            <div style="padding-right: 20px">
                                                <select id="cbx-hinhthucthanhtoan" class="cyrle" style="" onchange="changethanhtoan();">

                                                    <option value="Thanh toán khi giao hàng">Thanh toán khi giao hàng</option>
                                                    <!--                                                <option value="Chuyển khoản">Chuyển khoản</option>-->
                                                    <option value="Thanh toán trực tiếp tại công ty">Thanh toán trực tiếp tại công ty</option>

                                                </select>
                                            </div>
                                        </td>

                                    </tr>
                                </table>


                            </div>

                        </div>
                        <span class="htgiaohang" style="">        
                            <div class="tit hidden" style="width: 640px">
                                <h1>
                                    Hình Thức Giao Hàng
                                </h1>
                            </div>
                            <div style="padding: 20px 0">
                                <div style="position: relative;">
                                    <!--                                 <div style="height: 28px;position: relative;margin-bottom: 12px">
                                                                            <div class="_input-label" type="select" labelcolor="green">
                                                                                <div class="input" type="select">
                                                                                    <div class="select">
                                                                                        <select id="cbx-hinhthucgiaohang" style="padding-left: 166px" onchange="changegiaohang();">
                                                                                            <option value="Nhận Hàng Tại Công Ty">Nhận Hàng Tại Công Ty</option>
                                                                                            <option value="Giao hàng tận nơi">Giao hàng tận nơi</option>
                                    
                                                                                        </select>
                                                                                    </div>
                                                                                    <div class="label" style="width: 160px"><label>Hình Thức Giao Hàng</label></div>
                                                                                </div>
                                                                            </div>
                                                                    </div>-->
                                    <span class="dcgiaohang" style="">
                                        <table style="width: 100%">
                                            <tr>
                                                <td class="dvam pb12" >Địa chỉ giao hàng</td>
                                                <td colspan="3" style="padding-bottom: 12px">
                                                    <div style="padding-right: 20px">
                                                        <input type="text" id="txt-diachigiaohang" class="cyrle" value="{{$Configs["AddInfo"]["NumHouse"]}}"/>
                                                    </div>
                                                </td>

                                            </tr>

                                            <tr>
                                                <td class="dvam "></td>
                                                <td colspan="3">
                                                    <select id="cbx-khuvuc" class="cyrle" style="width: 160px;margin-right: 20px" onchange="citychange($(this).val());">
                                                        <option value="-1">[---Chọn khu vực---]</option>
                                                        {{foreach $data["city"] as $c}}
                                                            <option {{if $Configs["AddInfo"]["Region"]==$c["id"]}}selected=1{{/if}}  value="{{$c["id"]}}">{{$c["name"]}}</option>
                                                        {{/foreach}}
                                                    </select>
                                                    <span class="subcity">
                                                        <select id="cbx-quan" class="cyrle" style="width: 160px;margin-right: 20px" onchange="subcitychange($(this).val());">
                                                            <option value="-1">[---Chọn quận---]</option>
                                                            {{foreach $data["subcity"] as $sc}}
                                                                <option {{if $Configs["AddInfo"]["Co"]==$sc["id"]}}selected=1{{/if}} value="{{$sc["id"]}}">{{$sc["name"]}}</option>
                                                            {{/foreach}}
                                                        </select>
                                                        <span class="ssubcity" >
                                                            <select id="cbx-phuong" class="cyrle" style="width: 160px" onchange='changeshipprice($(this).val());'>
                                                                <option value="-1">[---Chọn phường---]</option>
                                                                {{foreach $data["ssubcity"] as $ssc}}
                                                                    <option {{if $Configs["AddInfo"]["subCo"]==$ssc["id"]}}selected=1{{/if}} value="{{$ssc["id"]}}">{{$ssc["name"]}}</option>
                                                                {{/foreach}}
                                                            </select>
                                                        </span>
                                                    </span>

                                                </td>

                                            </tr>
                                        </table>
                                    </span>


                                </div>
                            </div>
                        </span>
                        <div style="position: relative;height: 40px">
                            <div class="prebtn" onclick="gototep1()">
                                <img src="{{base_url()}}deal_css/images/quay-lai.png"/>
                            </div>
                            <div class="nextbtn" onclick="gototep3()">
                                <img src="{{base_url()}}deal_css/images/tiep-theo.png"/>
                            </div>
                        </div>
                        <!--                        <div class="mybutton" onclick="gototep1();">
                                                    <div><span>Quay Lại</span></div>
                                                </div>
                                                <div class="mybutton fr " onclick="gototep3()">
                                                    <div><span>Tiếp Theo</span></div>
                                                </div>
                                                <div class="clear"></div>-->
                    </div>
                    <div class="step3" style="position: relative;height: 40px;display: none;padding-bottom: 20px">
                        <div class="prebtn" onclick="gototep2()">
                            <img src="{{base_url()}}deal_css/images/quay-lai.png"/>
                        </div>
                        <div class="nextbtn" onclick="Orderfinish();">
                            <img src="{{base_url()}}deal_css/images/hoan-thanh.png"/>
                        </div>
                    </div>

                </div>
                <div class="" style="
                     width: 240px;
                     position: absolute;top: 20px;right: 20px;
                     ">
                    {{if isset($data["note1"][0])}}
                        <div class="" style="
                             width: 200px;
                             border: 1px solid #ccc;
                             padding: 8px 20px 0px 20px;-webkit-border-radius: 5px;
                             min-height: 200px;
                             -moz-border-radius: 5px;
                             border-radius: 5px;
                             margin-left: 0px;
                             margin-bottom: 20px;">
                            <div class="tit" >
                                <h2 style="overflow: hidden">
                                    {{$data["note1"][0]->title}}
                                </h2>
                            </div>
                            <p>{{$data["note1"][0]->content}}</p>
                        </div>
                    {{/if}}
                    {{if isset($data["note2"][0])}}
                        <div class="" style="
                             width: 200px;
                             border: 1px solid #ccc;
                             padding: 8px 20px 0px 20px;-webkit-border-radius: 5px;
                             min-height: 200px;
                             -moz-border-radius: 5px;
                             border-radius: 5px;
                             margin-left: 0px;
                             margin-bottom: 20px;">
                            <div class="tit" >
                                <h2 style="overflow: hidden">
                                    {{$data["note2"][0]->title}}
                                </h2>
                            </div>
                            <p>{{$data["note2"][0]->content}}</p>
                        </div>
                    {{/if}}
                </div>

            </div>
        </div>
    </div>
</div>
<script> 
    function reloadthanhtien(){
        if(isrunning)return;
        isrunning=true;
    
        var url=base_url+"orders/thanhtien";
        var data={
            soluong:$("#txt-soluong").val()
        };
        AjaxKU(url,data,function(result){
            if(result.code>=0){
                $("#thanhtien").html(result.msg);
                //loadtotalmonney();
            }else{
                ShowNoticeMsg(result.msg);
            }
            isrunning=false;
        });
    
    }
    function loadshipprice(){
        $(".sshipprice").load("{{base_url()}}orders/shipprice",function(){ loadtotalmonney(); });
    }
    function gototep2(){
        if(isrunning)return;
    
    
        var nguoinhan=$("#txt-nguoinhan").val();
        var sodienthoai=$("#txt-sodienthoai").val();
    
        var noidung=$("#txt-noidung").val();
    
        if(!_FcheckFilled(nguoinhan)){ $("#txt-nguoinhan").focus();return;  }

        if(!_FcheckFilled(sodienthoai)){ $("#txt-sodienthoai").focus();return;  }
        isrunning=true;
    
    
        var url=base_url+"orders/step1";
        var data={
            params            :   {
                ShipName:nguoinhan,
                ShipPhone:sodienthoai,
                ShipNote:noidung
            }
        };
        AjaxKU(url,data,function(result){
            if(result.code>=0){
                $(".step1").hide();
                $(".step2").show();
                $(".step3").hide();
                $(".order-step1-info").html(result.msg);
            }else{
                ShowNoticeMsg(result.msg);
            }
            isrunning=false;
        });
    
    }
    function getSelectedText(elementId) {
        var elt = document.getElementById(elementId);
        if (elt.selectedIndex <1)
            return "";
        return elt.options[elt.selectedIndex].text;
    }
    function gototep3(){
        if(isrunning)return;
    
        var hinhthucthanhtoan=$("#cbx-hinhthucthanhtoan").val();
        var diachigiaohang=$("#txt-diachigiaohang").val();
        var khuvuc=$("#cbx-khuvuc").val();
        var quan=$("#cbx-quan").val();
        var phuong=$("#cbx-phuong").val();

        if($("#cbx-hinhthucthanhtoan").val()!="Thanh toán trực tiếp tại công ty"){
            if(!_FcheckFilled(diachigiaohang)){ $("#txt-diachigiaohang").focus();return; }     
        }
        var strShipAddress=diachigiaohang+" "+getSelectedText("cbx-phuong")+" "+getSelectedText("cbx-quan") +" " + getSelectedText("cbx-khuvuc");
        isrunning=true;
        var data={
            params            :   {
                PayType:hinhthucthanhtoan,
                Address:diachigiaohang,
                Region:khuvuc,
                Co:quan,
                subCo:phuong,
                strShipAddress:strShipAddress
            }
        };
        var url=base_url+"orders/step2";
    
        AjaxKU(url,data,function(result){
            if(result.code>=0){
                $(".step2").hide();
                $(".step3").show();
                $(".order-step2-pay").html(result.msg);
            }else{
                ShowNoticeMsg(result.msg);
            }
            isrunning=false;
        });
    
    }
    function gototep1(){
        $(".step2").hide();
    
        $(".step1").show();
    }
    function changethanhtoan(){

        if($("#cbx-hinhthucthanhtoan").val()=="Thanh toán trực tiếp tại công ty"){
            $(".htgiaohang").hide();
        }else{
            $(".htgiaohang").show();
        }
    }
    function changegiaohang(){
        if($("#cbx-hinhthucgiaohang").val()=="Nhận Hàng Tại Công Ty"){
            $(".dcgiaohang").hide();
        }else{
            $(".dcgiaohang").show();
        }
    }
    function Orderfinish(){
        if(isrunning)return;
        isrunning=true;
        var nguoinhan=$("#txt-nguoinhan").val();
        var sodienthoai=$("#txt-sodienthoai").val();
        var noidung=$("#txt-noidung").val();
    
        var hinhthucthanhtoan=$("#cbx-hinhthucthanhtoan").val();
        var diachigiaohang=$("#txt-diachigiaohang").val();
        var khuvuc=$("#cbx-khuvuc").val();
        var quan=$("#cbx-quan").val();
        var phuong=$("#cbx-phuong").val();
        var strShipAddress=diachigiaohang+" "+getSelectedText("cbx-phuong")+" "+getSelectedText("cbx-quan") +" " + getSelectedText("cbx-khuvuc");
        var data={
            ProductID:$("#txt-productid").val(),
            Amount:$("#txt-soluong").val(),
            ShipInfo:{
                ShipName:nguoinhan,
                ShipPhone:sodienthoai,
                ShipNote:noidung
            },
            PayInfo:{
                PayType:hinhthucthanhtoan,
                Address:diachigiaohang,
                Region:khuvuc,
                Co:quan,
                subCo:phuong,
                strShipAddress:strShipAddress
            }
        };
        var url=base_url+"orders/OrderFinish";
    
        AjaxKU(url,data,function(result){
            if(result.code>=0){
                //ShowNoticeMsg(result.msg);
                $(".step3").html("<b>Đơn hàng đã được lập. Chúng tôi sẽ xác nhận đơn hàng trong thời gian sớm nhất.</b>");
            }else{
                ShowNoticeMsg(result.msg);
            }
            isrunning=false;
        });
    }
    function citychange(v){
        $(".subcity").html("Đang tải...");
        $(".subcity").load("{{base_url()}}orders/initsubcity?parentid="+v
        //,function(){ loadshipprice();loadtotalmonney(); }
    );
    
    }
    function subcitychange(v){
        $(".ssubcity").html("Đang tải...");
        $(".ssubcity").load("{{base_url()}}orders/initssubcity?parentid="+v
        //,function(){ loadshipprice();loadtotalmonney(); }
    );
    }
    function changeshipprice(v){
        $(".sshipprice").load("{{base_url()}}orders/changeshipprice/"+v
        //,function(){ loadtotalmonney(); }
    );
    }
    function loadtotalmonney(){
        $(".sttt").load("{{base_url()}}orders/tongthanhtien");
    }
    $(document).ready(function () {
        $("#txt-soluong").keydown(function(event) {
            // Allow: backspace, delete, tab, escape, and enter
            if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
                // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
                // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                // let it happen, don't do anything
                return;
            }
            else {
                // Ensure that it is a number and stop the keypress
                if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                    event.preventDefault(); 
                }   
            }
        });
    });
</script>